<?php
require_once('../../controller/login/indexController.php');

require_once('../../layout/top.php');
?>
<link rel="stylesheet" href="../../public/css/login.css" />

<script>
    function displayError(obj, message) {

        obj.innerHTML = message;
        $(obj).css('background', 'url(../../public/img/login_fleche.png) no-repeat center bottom, \n\
                                  url(../../public/img/motif_fond_bouton_rouge.png) repeat-x top');

//        $(obj).css('border-top', 'solid 1px orange');

    }

    function hideError(obj, message) {

        obj.innerHTML = message;
        $(obj).css('background', 'url(../../public/img/login_fleche.png) no-repeat center bottom, \n\
                                  url(../../public/img/motif_fond_bouton_orange.png) repeat-x bottom');

    }

    function connect_request() {


        

        if (xhr && xhr.readyState !== 0) {
            alert("Attendez que la requête ait abouti avant de faire joujou");
            xhr.abort(); // On annule la requête en cours !
        }

        var login = log.value;
        var pass = password.value;

        var xhr = $.ajax({
            
            url: "../../script/auth_account.php",
            type: "POST",
            data: {log: login, pass: pass},
            beforeSend: function() {
                                   
                    $('#loader').css('display','inline');

            },
            complete: function() { // Info Debuggage si erreur          
                $('#loader').css('display','none');
            },
            error: function(request, error) { // Info Debuggage si erreur          
                alert("Erreur : responseText: " + request.responseText);
            },
            success: function(data) {
                
                if (data === 'FAIL') {

                    $('#no_account').css('display', 'inline').css('opacity', '0').css('margin-right', '15px');

                    $('#no_account').animate({opacity: '100', "margin-right": '0px'}, 100);
                }
                else{
                    
                    var elem = data.split(' ');
                    
                    if(elem[0]==='OK'){
                        
                        $('#valid_account').css('display', 'inline').css('opacity', '0').css('margin-right', '15px');
                        
                        $('#valid_account').animate({opacity: '100', "margin-right": '0px'}, 100);
                        
                        document.location.href = "../../view/personnal_space/index.php?id="+elem[1];
                    }
                    
                    
                }

            }});
        
    }


    function connect() {

        var login = log.value;
        var pass = password.value;
        
        $('#no_account').css('display', 'none');
        $('#valid_account').css('display', 'none');

        error = null;

        if (login === '') {
            displayError(label_log, 'veuillez entrer un login !');
//            changeColor(label_log,'white','red');
            error = true;
        }
        else {
            hideError(label_log, 'login');

        }

        if (pass === '') {
            displayError(label_password, 'veuillez entrer un mot de passe !');
            error = true;
        }
        else {
            hideError(label_password, 'mot de passe');

        }


        if (!error) {
            connect_request();
        }
    }
    
    function register() {

        var name = name.value;
        var mail = mail.value;
        var adress = adress.value;
        var birth = birth.value;
        var new_pass = new_pass.value;
        var verif_new_pass = verif_new_pass.value;
        
//        $('#no_account').css('display', 'none');
//        $('#valid_account').css('display', 'none');

        error = null;

        if (name === '') {
            displayError(label_name, 'veuillez entrer un nom !');
//            changeColor(label_log,'white','red');
            error = true;}
        else {
            hideError(label_name, 'nom*');}

        if (mail === '') {
            displayError(label_mail, 'veuillez entrer une adresse mail valide !');
            error = true;}
        else {
            hideError(label_mail, 'mail*');}
        if (new_pass === '') {
            displayError(label_new_pass, 'veuillez entrer un mot de passe !');
            error = true;}
        else {
            hideError(label_new_pass, 'mot de passe*');}
        if (verif_new_pass === '') {
            displayError(label_verif_new_pass, 'les mots de passes ne sont pas les mêmes !');
            error = true;}
        else {
            hideError(label_verif_new_pass, 'retapez le mot de passe*');}


//        if (!error) {
//            connect_request();
//        }
    }

    
</script>

<table id="banniere">

</table>

<div id="page_content">
    <!--<form action="" method="post">-->
    <table id="login">
<!--        <tr>
            <td>
                Connection

            </td>
        </tr>-->
        <tr>
            <td>
                <label id="label_log" for="log">login</label><br/>
                <input class="text_area" onfocus=""
                       type="text" id="log" value=""/>
            </td>                                
        </tr>
        <tr>
            <td>
                <label id="label_password" for="password">mot de passe</label><br/>
                <input class="text_area" onfocus=""
                       type="password" id="password" value=""/>
            </td>
        </tr>
        <tr>
            <td>

                <span id="no_account" class="error" style="display: none;">ce compte n'existe pas !</span>
                <span id="valid_account" class="ok" style="display: none;">OK !</span>
                <span id="loader" style="display: none;">chargement</span>
                <input class="button bt_valid yes" onclick="connect();"
                       type="submit" value="connexion"/>
            </td>
        </tr>
    </table>
    <!--</form>-->    
    <br/>

    <!--<form action="" method="post">-->
        <table id="register">
    <!--        <tr>
                <td>
                    Inscription
                </td>
            </tr>-->
            <tr>
                <td>
                    <label id="label_name" for="name">nom*</label><br/>
                    <input id="name" class="text_area" onfocus=""
                           type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label id="label_mail" for="mail">mail*</label><br/>
                    <input id="mail" class="text_area" onfocus=""
                           type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label id="label_adress" for="adress">adresse</label><br/>
                    <input id="adress" class="text_area" onfocus=""
                           type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label id="label_birth" for="birth">date de naissance</label><br/>
                    <input id="birth" class="text_area" onfocus=""
                           type="text" value=""/>


                </td>
            </tr>
            <tr>
                <td>
                    <label id="label_newpass" for="newpass">mot de passe*</label><br/>
                    <input id="newpass" class="text_area" onfocus=""
                           type="text" value=""/>


                </td>
            </tr>
            <tr>
                <td>
                    <label id="label_verif_newpass" for="verif_newpass">retapez le mot de passe*</label><br/>
                    <input id="verif_newpass" class="text_area" onfocus=""
                           type="text" value=""/>


                </td>
            </tr>
            <tr>
                <td>
                    *champs obligatoires&nbsp;
                    <input class="button bt_valid yes" onclick="register();"
                           type="submit" value="inscription"/>
                </td>
            </tr>
        </table>
    <!--</form>-->    

</div>








<?php
include('../../layout/bottom.php');
?>
